<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时表白</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            background-color: #000;
            text-align: center;
            padding: 100px;
            color: pink;
        }


        #content{
            margin: 0 auto;
            display: none;
        }

        #num{
            font-size: 200px;
            color: red;
        }


    </style>
</head>
<body>
    <div id="num">5</div>
    <div id="content">
        <img id="img" src="./flower.gif" alt="">
        <audio id="play" autoplay>
<!--            autoplay="autoplay" loop="loop"-->
            <source src="./恋爱画板 - 锦零.mp3" type="audio/mp3" />
        </audio>
        <p>520快乐我的臭宝!</p>
        <p>YJH@somebody!</p>
    </div>
</body>


<script>

    window.addEventListener('load' , function(){
        let timer = setInterval(function(){
        $('num').innerText -= 1 ;
        if($('num').innerText === '0'){
            clearInterval(timer);

            //显示和隐藏
            $('content').style.display = 'block';
            $('num').style.display = 'none';
            $('img').addEventListener('click',function(){
                $('play').play(); 
            });

        }

        },1000);
    });

    function $(id) {
            return typeof id === 'string' ? document.getElementById(id) : null;
        }

</script>
</html>